<!--
 * @Description: 侧栏无限嵌套菜单（递归）
 * @Author: HuiSir<https://gitee.com/huisir001>
 * @Date: 2025-09-01 10:46:03
 * @LastEditTime: 2025-09-28 11:00:26
-->
<template>
  <el-menu-item
    v-if="!menu.children || !menu.children.length"
    :index="menu.code"
    :class="{ act: Route.name == menu.code }"
    @click="bindMenuClick(menu)"
  >
    <fy-icon v-if="menu.icon" :name="menu.icon" />
    <template #title>
      <span class="my-menu-title">{{ menu.title }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu
    v-else
    :index="menu.code"
    :class="{ act: Route.name == menu.code }"
  >
    <template #title>
      <fy-icon
        v-if="menu.icon"
        :name="menu.icon"
        @click="bindMenuClick(menu)"
      />
      <span class="my-menu-title" @click="bindMenuClick(menu)">{{
        menu.title
      }}</span>
    </template>
    <MenuItem v-for="child in menu.children" :key="child.code" :menu="child" />
  </el-sub-menu>
</template>

<script lang="ts">
export default {
  name: "MenuItem",
};
</script>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { menuJump } from "@/store/helpers";

defineProps<{
  menu: Permission;
}>();

const Router = useRouter();
const Route = useRoute();

// 菜单点击
const bindMenuClick = (menu: Permission) => {
  if (menu.code !== Route.name) {
    menuJump(menu, Router);
  }
};
</script>

<style lang="scss" scoped>
/** 
 * 菜单hover
 */
@mixin MenuHover {
  background-color: var(--color-sidebar-menu-bg-hover) !important;
  color: var(--color-sidebar-menu-font-hover) !important;
  & > i {
    color: var(--color-sidebar-menu-font-hover) !important;
  }
}
/** 
 * 菜单active
 */
@mixin MenuActive {
  color: var(--color-sidebar-menu-font-active) !important;
  & > i {
    color: var(--color-sidebar-menu-font-active) !important;
  }
}

.el-menu-item,
:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-menu__title) {
  height: 50px;
  line-height: 50px;
}

.my-menu-title {
  letter-spacing: 1px;
  font-size: var(--el-font-size-extra-small);
}

// 由于element 的高亮is-active不是特别准，尤其是刷新路由及目录激活时候无效
// 故这里手动激活高亮
:deep(.el-sub-menu.act > .el-sub-menu__title),
:deep(.el-menu-item.act) {
  @include MenuActive;
}
:deep(.el-sub-menu > .el-sub-menu__title),
:deep(.el-menu-item) {
  &:hover {
    transition: none;
    @include MenuHover;
  }
}
</style>

<style lang="scss">
/** 
 * 菜单hover
 */
@mixin MenuHover {
  background-color: var(--color-sidebar-menu-bg-hover) !important;
  color: var(--color-sidebar-menu-font-hover) !important;
  & > i {
    color: var(--color-sidebar-menu-font-hover) !important;
  }
}
/** 
 * 菜单active
 */
@mixin MenuActive {
  color: var(--color-sidebar-menu-font-active) !important;
  & > i {
    color: var(--color-sidebar-menu-font-active) !important;
  }
}
// 菜单缩放时下拉弹窗样式（由于缩放后下拉菜单元素在body外层，只能通过全局样式配置）
.el-menu--popup {
  .el-menu-item,
  .el-sub-menu__title {
    color: var(--el-text-color-regular) !important;
    height: 50px;
    line-height: 50px;
    font-size: var(--el-font-size-extra-small);
    letter-spacing: 1px;
  }
  .el-sub-menu.act > .el-sub-menu__title,
  .el-menu-item.act {
    @include MenuActive;
  }
  .el-sub-menu > .el-sub-menu__title,
  .el-menu-item {
    &:hover {
      transition: none;
      @include MenuHover;
    }
  }
}
</style>
